<template>
  <div class="footer-renderer" :class="mode">
    <!-- 设计模式 -->
    <div v-if="mode === 'design'" class="design-mode">
      <div class="footer-preview" :class="{ 'with-border': footerConfig.showBorder }">
        <div class="footer-content">
          <div class="left-section">
            <p v-if="footerConfig.leftText" class="footer-text">
              {{ footerConfig.leftText }}
            </p>
          </div>
          
          <div class="center-section">
            <p v-if="footerConfig.centerText" class="footer-text">
              {{ footerConfig.centerText }}
            </p>
          </div>
          
          <div class="right-section">
            <p v-if="footerConfig.rightText" class="footer-text">
              {{ footerConfig.rightText }}
            </p>
          </div>
        </div>
        
        <div v-if="footerConfig.signatureLines && footerConfig.signatureLines.length" class="signature-preview">
          <div 
            v-for="(line, index) in footerConfig.signatureLines" 
            :key="index"
            class="signature-line"
          >
            <span class="line-label">{{ line.label }}：</span>
            <span class="line-value">{{ line.value }}</span>
          </div>
        </div>
      </div>
      
      <div class="footer-actions">
        <el-button 
          size="mini" 
          @click="editFooter"
          icon="el-icon-edit"
        >
          编辑页脚
        </el-button>
      </div>
    </div>

    <!-- 预览和生成模式 -->
    <div v-else class="preview-mode">
      <div class="footer-display" :class="{ 'with-border': footerConfig.showBorder }" :style="footerStyle">
        <!-- 主要内容 -->
        <div class="footer-main">
          <div class="left-content">
            <div class="content-text" v-html="processedLeftText"></div>
          </div>
          
          <div class="center-content">
            <div class="content-text" v-html="processedCenterText"></div>
          </div>
          
          <div class="right-content">
            <div class="content-text" v-html="processedRightText"></div>
          </div>
        </div>
        
        <!-- 签名区域 -->
        <div v-if="footerConfig.signatureLines && footerConfig.signatureLines.length" class="signature-area">
          <div class="signature-container">
            <div 
              v-for="(line, index) in processedSignatureLines" 
              :key="index"
              class="signature-line-display"
            >
              <span class="signature-label">{{ line.label }}：</span>
              <span class="signature-value">{{ line.value }}</span>
            </div>
          </div>
        </div>
        
        <!-- 页脚信息 -->
        <div v-if="footerConfig.footerInfo" class="footer-info">
          {{ processedFooterInfo }}
        </div>
      </div>
    </div>

    <!-- 页脚编辑对话框 -->
    <el-dialog
      title="编辑页脚"
      :visible.sync="editDialog.visible"
      width="700px"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <footer-editor
        v-if="editDialog.visible"
        :footer-config="footerConfig"
        @save="handleFooterSave"
        @cancel="editDialog.visible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import FooterEditor from './FooterEditor.vue'

export default {
  name: 'FooterRenderer',
  components: {
    FooterEditor
  },
  props: {
    component: {
      type: Object,
      required: true,
      default: () => ({
        content: {
          leftText: '',
          centerText: '',
          rightText: '',
          showBorder: true,
          signatureLines: [],
          footerInfo: ''
        }
      })
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editDialog: {
        visible: false
      }
    }
  },
  computed: {
    footerConfig() {
      console.log('this.component.content',this.component.content)
      return this.component.content || {}
    },
    
    footerStyle() {
      const styles = {
        padding: '20px',
        backgroundColor: this.footerConfig.backgroundColor || '#f8f9fa',
        fontSize: this.footerConfig.fontSize || '12px'
      }
      
      if (this.footerConfig.showBorder) {
        styles.borderTop = '1px solid #e6e8eb'
      }
      
      // 合并组件样式
      if (this.component.style) {
        Object.assign(styles, this.component.style)
      }
      
      return styles
    },
    
    processedLeftText() {
      let text = this.footerConfig.leftText || ''
      text = this.replaceVariables(text)
      return text.replace(/\n/g, '<br>')
    },
    
    processedCenterText() {
      let text = this.footerConfig.centerText || ''
      text = this.replaceVariables(text)
      return text.replace(/\n/g, '<br>')
    },
    
    processedRightText() {
      let text = this.footerConfig.rightText || ''
      text = this.replaceVariables(text)
      return text.replace(/\n/g, '<br>')
    },
    
    processedSignatureLines() {
      return (this.footerConfig.signatureLines || []).map(line => ({
        label: this.replaceVariables(line.label),
        value: this.replaceVariables(line.value)
      }))
    },
    
    processedFooterInfo() {
      return this.replaceVariables(this.footerConfig.footerInfo || '')
    }
  },
  methods: {
    /**
     * 编辑页脚
     */
    editFooter() {
      this.editDialog.visible = true
    },
    
    /**
     * 处理页脚保存
     */
    handleFooterSave(updatedConfig) {
      this.$emit('update', {
        content: updatedConfig
      })
      this.editDialog.visible = false
    },
    
    /**
     * 替换变量
     */
    replaceVariables(text) {
      if (!text || typeof text !== 'string') return text
      
      return text.replace(/\{\{(\w+)\}\}/g, (match, variable) => {
        const value = this.findVariableValue(variable)
        return value !== undefined ? value : match
      })
    },
    
    /**
     * 查找变量值
     */
    findVariableValue(variable) {
      if (!this.testData) return undefined
      
      // 在基本信息中查找
      if (this.testData.basicInfo && this.testData.basicInfo[variable] !== undefined) {
        return this.testData.basicInfo[variable]
      }
      
      // 特殊变量处理
      const specialVars = {
        currentDate: new Date().toLocaleDateString(),
        currentTime: new Date().toLocaleTimeString(),
        currentYear: new Date().getFullYear().toString(),
        pageNumber: '1', // 实际使用时可以从分页信息获取
        totalPages: '1'  // 实际使用时可以从分页信息获取
      }
      
      if (specialVars[variable] !== undefined) {
        return specialVars[variable]
      }
      
      return undefined
    }
  }
}
</script>

<style scoped>
.footer-renderer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.design-mode {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-preview {
  flex: 1;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 16px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-preview.with-border {
  border-top: 1px solid #409eff;
  border-style: solid;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.left-section,
.center-section,
.right-section {
  flex: 1;
}

.footer-text {
  margin: 0;
  font-size: 12px;
  color: #606266;
  text-align: center;
}

.left-section .footer-text {
  text-align: left;
}

.right-section .footer-text {
  text-align: right;
}

.signature-preview {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 12px;
  border-top: 1px dashed #e6e8eb;
}

.signature-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.line-label {
  font-size: 12px;
  color: #909399;
}

.line-value {
  font-size: 12px;
  color: #303133;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
}

.footer-actions {
  display: flex;
  justify-content: center;
}

.preview-mode {
  width: 100%;
  height: 100%;
}

.footer-display {
  width: 100%;
  height: 100%;
  color: #606266;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.left-content,
.center-content,
.right-content {
  flex: 1;
}

.content-text {
  line-height: 1.5;
  white-space: pre-line;
}

.left-content .content-text {
  text-align: left;
}

.center-content .content-text {
  text-align: center;
}

.right-content .content-text {
  text-align: right;
}

.signature-area {
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
}

.signature-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.signature-line-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.signature-label {
  font-size: 12px;
  color: #909399;
}

.signature-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid #303133;
  min-width: 100px;
  text-align: center;
}

.footer-info {
  text-align: center;
  font-size: 11px;
  color: #909399;
  margin-top: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-preview {
    padding: 12px;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .left-section .footer-text,
  .right-section .footer-text {
    text-align: center;
  }
  
  .signature-preview {
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-main {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .left-content .content-text,
  .right-content .content-text {
    text-align: center;
  }
  
  .signature-container {
    flex-direction: column;
    gap: 20px;
  }
}
</style>